<form action="{:url()}" method="post" class="form_single">
    <div class="box">
      <div class="box-body">
        <div class="row">
          <div class="col-md-6">
            <div class="form-group">
              <label>分类名称 <span class="text-danger">*</span></label>
              <span>（分类的名称）</span>
              <input class="form-control" name="name" placeholder="请输入分类名称" value="{$info['name']|default=''}" type="text" required>
            </div>
          </div>
          
          <div class="col-md-6">
            <div class="form-group">
              <label>父级分类</label>
              <span>（选择父级分类，不选则为顶级分类）</span>
              <select class="form-control" name="parent_id">
                <option value="0">顶级分类</option>
                {volist name="categoryOptions" id="option"}
                <option value="{$option.id}" 
                        {if condition="($info.parent_id ?? 0) == $option.id"}selected{/if}
                        data-level="{$option.level}">
                    {$option.name_with_level}
                </option>
                {/volist}
              </select>
            </div>
          </div>
          
          <div class="col-md-6">
            <div class="form-group">
              <label>分类图标</label>
              <span>（分类小图标，为空则显示系统默认图标）</span>
              {assign name="icon" value="$info.icon|default=''" /}
              {:widget('icon/index', ['name' => 'icon', 'value' => $icon])}
            </div>
          </div>
          
          <div class="col-md-6">
            <div class="form-group">
              <label>排序</label>
              <span>（数字越小越靠前）</span>
              <input class="form-control" name="sort" placeholder="请输入排序值" value="{$info['sort']|default=50}" type="number" min="0">
            </div>
          </div>
          
          <div class="col-md-6">
            <div class="form-group">
              <label>状态</label>
              <span>（分类启用状态）</span>
              <select class="form-control" name="status">
                <option value="1" {if condition="($info.status ?? 1) == 1"}selected{/if}>启用</option>
                <option value="0" {if condition="($info.status ?? 1) == 0"}selected{/if}>禁用</option>
              </select>
            </div>
          </div>
          
          <div class="col-md-12">
            <div class="form-group">
              <label>分类描述</label>
              <span>（分类的详细描述）</span>
              <textarea class="form-control" name="description" rows="4" placeholder="请输入分类描述">{$info['description']|default=''}</textarea>
            </div>
          </div>
          
          {if condition="!empty($info.id)"}
          <div class="col-md-12">
            <div class="alert alert-info">
              <h5><i class="fa fa-info-circle"></i> 分类信息</h5>
              <p><strong>分类路径：</strong>{$info.path_names|default='暂无'}</p>
              <p><strong>层级深度：</strong>第 {$info.level + 1} 级</p>
              <p><strong>子分类数量：</strong>{$info.children_count|default=0} 个</p>
              <p><strong>创建时间：</strong>{$info.create_time_text|default='暂无'}</p>
              {if condition="!empty($info.update_time_text)"}
              <p><strong>更新时间：</strong>{$info.update_time_text}</p>
              {/if}
            </div>
          </div>
          {/if}
            
        </div>
      </div>
      <div class="box-footer">
        
        <input type="hidden" name="id" value="{$info['id']|default='0'}"/>
          
        {include file="layout/edit_btn_group"/}
        
      </div>
    </div>
</form>

<style>


.alert-info {
    border-left: 4px solid #3c8dbc;
}

.alert-info h5 {
    color: #3c8dbc;
    margin-top: 0;
}

.alert-info p {
    margin-bottom: 5px;
}

.alert-info p:last-child {
    margin-bottom: 0;
}

select option[data-level="1"] {
    padding-left: 20px;
}

select option[data-level="2"] {
    padding-left: 40px;
}

select option[data-level="3"] {
    padding-left: 60px;
}
</style>

<script>
$(function() {
    // 设置下拉菜单默认值
    ob.setValue("parent_id", {$info.parent_id ?? 0});
    ob.setValue("status", {$info.status ?? 1});
    

    
    // 表单验证
    $('.form_single').submit(function() {
        var name = $('input[name="name"]').val().trim();
        if (!name) {
            layer.msg('请输入分类名称');
            $('input[name="name"]').focus();
            return false;
        }
        
        var sort = $('input[name="sort"]').val();
        if (sort !== '' && (isNaN(sort) || sort < 0)) {
            layer.msg('排序值必须为非负数字');
            $('input[name="sort"]').focus();
            return false;
        }
        
        return true;
    });
});
</script>